<template>
    <div class="advantages" id="advantages">
      <p class="title">Key Features Of MT5:</p>
      <div class="advantagesbox">
        <div>
          <img src="../images/4.png" alt="">
        </div>
        <div>
          <ul>
            <li>
              CFDs on Forex, Stocks, Indices, Metals.
            </li>
            <li>
              All order types supported, including 6 Pending Orders.
            </li>
            <li>
              Support Expert Advisors (EA), trading robots & copy trading.
            </li>
            <li>
              In-depth analysis with 38+ indicators, 21 timeframes, and custo.
            </li>
            <li>
              Economic insights with a built-in Economic Calendar for informe.
            </li>
            <li>
              Enhanced security for peace of mind.
            </li>
            <li>
              User-friendly interface for all experience levels.
            </li>
            <li>
              Backtest & optimize strategies before risking real capital.
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="webtrader" id="webtrader">
      <div>
        <div>
            <p>The Next Level In Trading Platforms</p>
            <p>Take your trading to the next level with MetaTrader 5 (MT5), the powerful and versatile trading platform designed for both experienced and beginner traders.</p>
            <p>This fifth-generation platform from MetaQuotes equips you with a comprehensive suite of features and functionalities to gain an edge in market analysis, trade execution, and automated strategy development.</p>
        </div> 
        <img src="../images/5.png" alt=""> 
      </div>
    </div>
    <div class="btngroup" id="downloadapp">
        <div>
          Trade With Ease, Trade With Us
        </div>
        <span @click="gopath('http://img.thetraverser.com/mt5setup.exe')">
          <img src="../images/6.png" alt="">
        </span>
        <span @click="gopath('http://img.thetraverser.com/MetaTrader5.pkg.zip')">
          <img src="../images/7.png" alt="">
        </span>
    </div>
</template>

<script lang='ts'>

  import { defineComponent, reactive, onMounted} from 'vue'

  export default defineComponent({

    name: 'desktop',

    props: {},

    components: {},

    setup(props, { emit }) {

      const state = reactive({
      
      })

      onMounted(()=>{
        console.log('组件挂载了')
      })

      const gopath=(url:string)=>{
        window.open(url,'_blank')
      }

      return {
        state,
        gopath
      }

    }

  })
</script>

<style lang='scss' scoped>
    .advantages{
        background-color:#fff;
        padding-top:120px;
        padding-bottom:90px;
        display: flex;
        flex-direction: column;
        align-items: center;

        p,ul{
            margin:0;
            padding:0;
            list-style: none;
        }

        .title{
            font-weight: 900;
            font-size: 40px;
            color: #E24737;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }

        .advantagesbox{
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top:106px;
            width:1200px;

            img{
                width:440px;
                height:421px;
            }
        }

        ul{
            margin-left:145px;
            li{
                margin-top:41px;
                font-weight: 400;
                font-size: 24px;
                color: #333333;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
            li:nth-child(1){
                margin-top:0;
            }
        }
    }

    .webtrader{
        background-color:#FAEEEC;
        padding-top:72px;
        padding-bottom:139px;
        >div{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width:1200px;
            margin:0 auto;

            img{
              width:464px;
              height:400px; 
            }

            div{
                margin-right:60px;
                p:nth-child(1){
                    font-weight: 900;
                    font-size: 40px;
                    color: #E24737;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
                p:nth-child(2),p:nth-child(3){
                    font-weight: 400;
                    font-size: 24px;
                    color: #333333;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }
        }
    }

    .btngroup{
        background-color:#EEDAD8;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding:40px 0;
        div{
            font-weight: 400;
            font-size: 36px;
            color: #E24737;
            font-style: normal;
            text-transform: none;
        }
        span{
          margin-left:125px;
          img{
            width:276px;
            height:79px;
          }
        }
    }
</style>